<template>
	<view>
		<!-- 录音模态框 -->
		<view class="modal-mask">
		</view>
		<view class="modal-dialog">
			<view class="record-modal">
			<view class="iconfont icon-qingchu1 close" @click="close"></view>
				<view class="record-wrap" @tap="tapRecord">
					<view class="iconfont icon-luyin luyin-set"></view>
					<view class="record-text">{{recordText}}</view>
				</view>
				<!-- 录音结束后状态显示  -->
				<view class="ended-operation" v-if="recordText == '录音结束,点击开始'">
					<view class="iconfont icon-shiting icon-shiting-set" @tap="playVoice()"></view> 
					<view class="iconfont icon-duigou1 submit-record"></view>
				</view>
				<view class="local-import input" ref="input">本地导入</view>
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	//内置播放器
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				voicePath:"",//录音地址
				recordText:"点击开始录音",
				isRecord:false
			};
		},
		mounted() {
			//监听录音结束事件
			recorderManager.onStop((res)=>{
				console.log('recorder stop' + JSON.stringify(res));
					this.voicePath = res.tempFilePath;
				
			});
			var input = document.createElement('input')
			input.type = 'file'  
			input.onchange = (event) => {  
				console.log(event)  
			}  
			this.$refs.input.$el.appendChild(input)  
		},
		methods:{
			//关闭录音弹出框
			close(){
				console.log(111);
				this.$emit('closeRecord',this.isRecord);
			},
			//点击录音事件 
			tapRecord(){
				if(this.recordText=="点击开始录音"){
					this.startRecord();
					this.recordText="录音中,点击结束";
				} else if(this.recordText=="录音中,点击结束"){
					this.endRecord();
					this.recordText="录音结束,点击开始";
				} else {
					this.startRecord();
					this.recordText="录音中,点击结束"
				}
			},	
			startRecord() {
				console.log('开始录音');
					
				recorderManager.start();
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					//获取到当前录音的暂时存储路径
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			}
		}
	}
</script>

<style>
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}
.modal-dialog {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .close {
	 position: absolute;
	 top: 0;
	 right: 20px;
	 font-size: 40px;
	 color: #FF8920;
 }
.record-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.record-wrap{
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 50%;
	border: 1px solid #D8D8D8;
	background-color: #fff;
	color: #888888;
}
.luyin-set {
	font-size: 100px;
	color: #FF8920;
}
.record-text {
	position: relative;
	top: -20px;
	font-size: 16px;
}
.local-import{
	margin-top: 60px;
	width: 150px;
	padding: 5px 0;
	color: #FFFFFF;
	background-color: #FFC107;
	border-radius: 10px;
	text-align: center;
	font-size: 16px;
}
.ended-operation{
	width: 200px;
	display: flex;
	justify-content: space-between;
}
.icon-shiting-set,.submit-record{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
	width: 50px;
	height: 50px;
	font-size: 30px;
	color: #FF8920;
	border-radius: 50%; 
}
</style>
